<template>
	<view class="pt40 plr30">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="h60 pl10"></view>
		<view class="mb50 flex_a h100 plr30 bf border-r1 shadow">
			<view class="flex1"><input type="text" v-model="dataForm.deviceNo" placeholder-class="c9"
					placeholder="请扫描或输入设备编号" /></view>
			<view class="w80 h80 p20" @click="scanCode">
				<image src="/static/ic_sm1_2x.png" mode="widthFix" style="width: 40upx;height: 40upx;"></image>
			</view>
		</view>
		<view class="h60 pl10">请选择具体故障</view>

		<view v-if="current===0"
			style="margin-top: 15upx;margin-bottom: 20upx;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
			<view v-for="item in textList" :key="item.value" @click="textFn(item.label)"
				style="display: flex;justify-content: flex-start;align-items: center;margin-right: 15upx;margin-bottom: 30upx;">
				<text :class="optext ===item.label? 'red' :'green'">{{item.label}}</text>
			</view>
		</view>
		<view v-else-if="current===1"
			style="margin-top: 15upx;margin-bottom: 20upx;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
			<view v-for="item in textLists" :key="item.value" @click="textFns(item.label)"
				style="display: flex;justify-content: flex-start;align-items: center;margin-right: 15upx;margin-bottom: 30upx;">
				<text :class="optexts ===item.label? 'red' :'green'">{{item.label}}</text>
			</view>
		</view>

		<view class="h60 pl10">上传照片（最多3张）</view>
		<view class="mb50 ptb30 bsb bf border-r1 shadow" style="min-height: 300upx;">
			<robby-image-upload v-model="pics" :serverUrl="imgUploadUrl" fileKeyName="file" :form-data="formData"
				:showUploadProgress="true" :limit="3" @add="addImg"></robby-image-upload>
		</view>
		<view class="h60 pl10">备注</view>
		<view class="h300 p24 bsb bf border-r1 shadow">
			<textarea class="pw100 bf" v-model.trim="dataForm.faultContent" :show-count="false" :enableNative="false"
				:rows="4" cursor-spacing="40" style="min-height: 60upx;" placeholder="请输入设备故障问题"
				placeholder-class="c9"></textarea>
		</view>

		<view class="plr60 pt100 pb60">
			<u-button type="primary" shape="circle" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		HOST
	} from '@/config/index.js'
	import {
		Validator
	} from '@/utils/validate'
	import {
		faultReport
	} from '@/api/public.js'
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		name: 'fault',
		data() {
			return {
				optext: '无法换电',
				textList: [{
					value: 1,
					label: '无法换电'
				}, {
					value: 2,
					label: '仓位坏了'
				}, {
					value: 3,
					label: '设备离线'
				}, {
					value: 4,
					label: '找不到换电柜'
				}, {
					value: 5,
					label: '设备报警'
				}, {
					value: 6,
					label: '显示屏坏了'
				}, {
					value: 7,
					label: '设备断电'
				}, {
					value: 8,
					label: '状态灯故障'
				}],

				optexts: '充放电高温',
				textLists: [{
					value: 1,
					label: '充放电高温'
				}, {
					value: 2,
					label: '柜子不识别电池'
				}, {
					value: 3,
					label: '被盗/被扣'
				}, {
					value: 4,
					label: '电池错拿'
				}, {
					value: 5,
					label: '电池离线'
				}, {
					value: 6,
					label: '外壳损坏'
				}, {
					value: 7,
					label: '充放电低温'
				}, {
					value: 8,
					label: '电池短路'
				}, {
					value: 9,
					label: '电池SDC电流问题'
				}, {
					value: 10,
					label: '电池亏电'
				}, {
					value: 11,
					label: '温度传感器异常'
				}, {
					value: 12,
					label: '不充电'
				}, {
					value: 13,
					label: '电池放电异常'
				}, {
					value: 14,
					label: '早期电池返厂'
				}, {
					value: 15,
					label: '高温保护'
				}, {
					value: 16,
					label: '电池压差问题'
				}, {
					value: 17,
					label: '数据采集'
				}],
				list: [{
					name: '换电柜'
				}, {
					name: '电池'
				}],
				current: 0,
				imgUploadUrl: HOST + '/common/upload',
				header: {
					contentType: 'application/x-www-form-urlencoded',
					Authorization: 'abcdefghijklmnopqrstuvwxyz'
				},
				formData: {
					Authorization: 'abcdefghijklmnopqrstuvwxyz'
				},
				pics: [],
				dataForm: {
					deviceNo: '',
					faultContent: '',
					faultImg: [],
					deviceType: 1, //1换电柜，4电池
					faultReason: '', //具体故障
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
				console.log('222', this.current);
			},

			textFn(text) {
				this.optext = text
				console.log('3333', text);
			},
			textFns(text) {
				this.optexts = text
				console.log('4444', text);
			},
			scanCode() {
				const _self = this
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success(res) {
						console.log(res)
						if (res.errMsg == 'scanCode:ok') {
							let deviceNo = ''
							let deviceType = 0
							if (res.scanType == 'QR_CODE') {
								deviceNo = _self.getUrlParam('deviceNo', res.result)
								deviceType = _self.getUrlParam('deviceType', res.result)
							}
							if (deviceNo) {
								_self.dataForm.deviceNo = deviceNo
							} else {
								_self.toast('请扫描正确的二维码')
							}
						}
					}
				})
			},
			addImg(e) {
				console.log(e)
				this.dataForm.faultImg = [...this.dataForm.faultImg, ...e.imgArr.map(item => item.fileName)]
			},
			submit() {
				const validator = new Validator()
				validator.add(this.dataForm.faultContent, [{
					strategy: 'isNoEmpty',
					errorMsg: '内容不能为空！'
				}])
				let errorMsg = validator.start()
				if (errorMsg) {
					return this.toast(errorMsg)
				}
				if (this.dataForm.faultImg.length == 0) {
					return this.toast('请上传图片')
				}
				if (this.current === 0) {
					if (!this.optext) {
						return this.toast('请选择换电柜具体故障')
					}
				}
				if (this.current === 1) {
					if (!this.optexts) {
						return this.toast('请选择电池的具体故障')
					}
				}

				this.faultReport()
			},
			async faultReport() {
				console.log('8888', this.current);
				if (this.current === 0) {
					this.dataForm.deviceType = 1
					this.dataForm.faultReason = this.optext
				} else {
					this.dataForm.deviceType = 4
					this.dataForm.faultReason = this.optexts
				}
				console.log('8888', this.dataForm);
				const res = await faultReport(this.dataForm)

				this.confirm({
					content: '反馈成功',
					showCancel: false
				}).then(() => {
					uni.navigateBack({
						delta: 1,
						fail() {
							uni.redirectTo({
								url: '/pages/user/kefu/index'
							})
						}
					})
				})
			}
		},
		components: {
			robbyImageUpload
		}
	}
</script>

<style scoped lang="scss">
	.tit_active {
		background-color: $primary;
		color: #fff;
	}



	.green {
		--green: #8a8cff;
		font-size: 24upx;
		padding: 8upx;
		letter-spacing: 0.06em;
		position: relative;
		font-family: inherit;
		border-radius: 1.6em;
		overflow: hidden;
		transition: all 0.3s;
		line-height: 1.4em;
		border: 2px solid var(--green);
		background: linear-gradient(to right, rgba(146, 153, 253, 0.1) 1%, transparent 40%, transparent 60%, rgba(146, 142, 253, 0.1) 100%);
		color: blue;
		box-shadow: inset 0 0 10px rgba(130, 132, 253, 0.4), 0 0 9px 3px rgba(145, 141, 253, 0.1);
	}

	.red {
		--green: #ff5a7e;
		font-size: 24upx;
		padding: 8upx;
		letter-spacing: 0.06em;
		position: relative;
		font-family: inherit;
		border-radius: 1.6em;
		overflow: hidden;
		transition: all 0.3s;
		line-height: 1.4em;
		border: 2px solid var(--green);
		background: linear-gradient(to right, rgba(253, 88, 105, 0.1) 1%, transparent 40%, transparent 60%, rgba(253, 74, 92, 0.1) 100%);

		color: #ff5a7e;
		box-shadow: inset 0 0 10px rgba(253, 87, 98, 0.4), 0 0 9px 3px rgba(253, 91, 107, 0.1);

	}
</style>